<template>
  <div class="bed-box">
    <el-card class="box-card">
        <div style="width: 100%;height: 30px;text-align:left;margin-bottom: 30px;border-bottom-style: dashed;border-bottom-width: 1px"><span style="text-align: left;font-weight: 700">选择床位</span></div>
        <!-- 分步 -->
		<div style="width: 90%;margin: auto">
            <el-steps :active="active" finish-status="success" align-center>
                <el-step :title="step.step1"></el-step>
                <el-step :title="step.step2"></el-step>
                <el-step :title="step.step3"></el-step>
                <el-step :title="step.step4"></el-step>
            </el-steps>
        </div>
        <div style="width: 100%;height: 350px"><router-view></router-view></div>
		<!-- 上一步 下一步 按钮 -->
        <div style="width: 100%;height: 40px;">
            <div style="width: 80%;left: 900px;margin: auto">
				<div style="width: 200px;left: 70%;position: relative">
					<el-button :type="lasttype" round style="position: relative;right: 0px" @click="last" :disabled="this.active === 0">上一步</el-button>
					<el-button :type="nexttype" round style="position: relative;right: 0px" @click="next" >{{nextname}}</el-button>
				</div>
            </div>
        </div>
    </el-card>
  </div>
</template>

<script>

import { ElMessage } from 'element-plus'
import request from '../../utils/request'

export default {
	data() {
		return {
			active: 0,
			step: {
				step1: '确认信息',
				step2: '选择寝室',
				step3: '选择床位',
				step4: '完成'
			},
			lasttype: 'info',
			nexttype: 'primary',
			nextname: '下一步'
		}
	},
	created() {
		this.$router.push('/dist/choosebed/step1')
		this.$store.commit('SET_ROOM', '');
		this.$store.commit('SET_BED', '');
		this.judgeIsSelected()
	},
	methods: {
		judgeIsSelected() {
			request({
				method: 'get',
				url: '/api/dorm/select',
				headers: {'jwtToken': this.$store.getters.getToken}
			}).then(res => {
				if (res.code === 200) {
					this.$router.replace('/dist/selected')
				}
			})
		},
		// 下一步
		next() {
			this.active++;
			if (this.active > 4) {
				this.active = 4;
				request({
					method: 'post',
					url: '/api/dorm/choice',
					headers: {'jwtToken': this.$store.getters.getToken},
					data: { dormId: this.$store.getters.getBed }
				}).then(res => {
					if (res.code === 200) {
						this.judgeIsSelected();
					} else {
						ElMessage.warning('发生错误！')
					}
				})
			}
			if (this.active === 1) {
				this.step.step1 = '完成';
				this.$router.push({path: '/dist/choosebed/step2', replace: true})
				this.nexttype = 'primary'
				this.lasttype = 'primary'
			} else if (this.active === 2) {
				if (this.$store.getters.getRoom === '') { // 未选择寝室
					ElMessage({
						message: '请选择寝室',
						type: 'warning',
					})
					this.active--;
				} else { //已选择寝室
					this.$router.push({path: '/dist/choosebed/step3', replace: true})
					this.step.step2 = '完成';
				}
				this.nexttype = 'primary'
				this.lasttype = 'primary'
			} else if (this.active === 3) {
				if (this.$store.getters.getBed === '') { // 未选择床位
					ElMessage({
						message: '请选择床位',
						type: 'warning',
					})
					this.active--;
				} else { // 已选择床位
					this.step.step3 = '完成';
					this.active++;
					this.step.step4 = '完成';
					this.nexttype = 'success'
					this.nextname = '返回'
				}
			}
			// console.log(this.active)
		},
		last() {
			this.active--;
			if (this.active < 0) {
				this.active = 0;
			}
			if (this.active === 0) {
				this.lasttype = 'info'
			} else {
				this.lasttype = 'primary'
				this.nexttype = 'primary'
				this.nextname = '下一步'
			}
			if (this.active === 3) {
				this.step.step4 = '完成';
				this.$router.push({path: '/dist/choosebed/step4', replace: true})
			} else if (this.active === 2) {
				this.step.step3 = '选择床位';
				this.$router.push({path: '/dist/choosebed/step3', replace: true})
			} else if (this.active === 1) {
				this.step.step2 = '选择寝室';
				this.$router.push({path: '/dist/choosebed/step2', replace: true})
			} else if (this.active === 0) {
				this.step.step1 = '确认信息';
				this.$router.push({path: '/dist/choosebed/step1', replace: true})
			}
		}
	},
}
</script>

<style lang="less" scoped>
.bed-box {
    width: 100%;
    height: 100%;
}

.box-card {
    width: 100%;
    height: 100%;
}
</style>
